<template>
  <div>
    <!-- <p>课程管理</p> -->
    <!-- 提示框 -->
    <div class="Kcgl_chao">
      <h4 style="margin-left: 1%;">操作说明:</h4>
      <p class="Kcgl_p"> * 该功能主要用于设置课程相关的信息，包括新增和编辑等操作,课程是与班级绑定的,每个班级都可以设置自己的课程,与其他班级无关。</p>
    </div>
<!-- 查询框 -->
    <div style="overflow: hidden;">
    <div class="Kcgl_shuo">
      <el-select
        style="margin-left: 1%;"
        v-model="value"
        multiple
        filterable
        allow-create
        default-first-option
        placeholder="请选要查询的班级">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button class="Kcgl_shuo_enniu" type="primary" icon="el-icon-search" @click="shousuo">搜索</el-button>
      <el-button style="margin-right:1%" type="primary" icon="el-icon-circle-plus" @click="tianjia">添加班级</el-button>
    </div>
<!-- 课程内容 -->
    <div class="Kcgl_neirong">
      <el-table
        :data="tableData"
        style="width: 100%"
        max-height="250">
        <el-table-column
          fixed
          prop="id"
          label="序号"
          width="500">
        </el-table-column>
        <el-table-column
          prop="course"
          label="课程名称"
          width="300">
        </el-table-column>
        <el-table-column
          prop="state"
          label="课程状态"
          width="400">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    </div>
  </div>
</template>

<style scoped>
/* 提示框 */
  .Kcgl_chao{
    height: 50px;
    border: 1px #dcdcdc solid;
    border-radius: 12px;
    box-shadow: 2px 2px 2px #c4c3c3;
    background: whitesmoke;
    margin-left: 4%;
    margin-top: 1%;
  }
  .Kcgl_p{
    font-size: 12px;
    padding-left: 1%;
    padding-top: 0.5%;
  }
/* 查询框  */
  .Kcgl_shuo{
    margin-left: 1%;
    margin-top: 1%;
  }
  .Kcgl_shuo_enniu{
    margin-left: 1%;
  }
  .el-button+.el-button{
    float: right;
  }
  /* 课程内容 */
  .Kcgl_neirong{
    margin-left: 1%;
    margin-top: 2%;
  }
</style>

<script>
export default {
  data(){
    return{
        options: [{
          value: 'yiban',
          label: '计算机一班'
        }, {
          value: 'erban',
          label: '计算机二班'
        }, {
          value: 'sanban',
          label: '计算机三班'
        }],
        value: [],
        tableData: [
          {
            id: '序号',
            course: '课程名称',
            state: '课程状态',
          },
        ],
    }
  },
  methods: {
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      shousuo(){
        console.log(this.value)
      },
      tianjia(){

      },
  },
  created(){
    console.log(123)
    this.$http.get('/api/getUser?limit=5&offset=0').then((res)=>{
      console.log(res)
    })
  }
}
</script>